<template>
  <SvgIcon
    v-if="userMusicSource.userLikedMusics.includes(props.song?.id)"
    icon-name="iconshoucangfill"
    color="red"
    :size="16"
    class-name="tableIcon mr-10"
    @icon-click="handleClickHeart('del')"
  ></SvgIcon>
  <SvgIcon
    v-else
    icon-name="iconshoucang"
    :size="16"
    class-name="tableIcon mr-10"
    @icon-click="handleClickHeart('add')"
  ></SvgIcon>
</template>

<script setup lang="ts">
import useUserMusicSourceStore from "@/stores/userMusicSource";
import useLoginStore from "@/stores/login";

import { PlayListSong } from "@/types/album";

const props = defineProps<{
  song: PlayListSong;
}>();
const userMusicSource = useUserMusicSourceStore();
const loginStore = useLoginStore();

const handleClickHeart = (op: string) => {
  if (props.song?.id) {
    if (op === "del") {
      userMusicSource.dislikeMusic(props.song.id);
    } else if (op === "add") {
      userMusicSource.likeMusic(props.song.id);
    }
  }
};
</script>

<style scoped lang="less"></style>
